<template>
  <div class="road-detail-content">
      <div class="wy-main-title info-1200 wy-m-t-20">
          <p>首页  /  物流信息服务  /   线路信息  /  <span>{{departureCar}}-{{destinationCar}}</span></p>
      </div>
      <div class="road-startCity">
          <a-form :form="form" class='info-1200' style='margin-top:30px;'>
              <a-row :gutter='24' class='city-form'>
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="出发地:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                         <a-input  placeholder="请选择出发地"  :value="departureCar" readOnly @click="magSvgShowMap('departureCar')"/>
                    </a-form-item>
                </a-col>
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="到达地:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                        <a-input  placeholder="请选择车辆到达地" :value="destinationCar" readOnly @click="magSvgShowMap('destinationCar')"/>
                    </a-form-item>
                </a-col>
                <a-col :span='6' class='s-place-140'>
                    <a-form-item label="公司名称:"  :label-col="{ span: 10}" :wrapper-col="{ span:14 }">
                        <a-input  placeholder="请输入公司名称"/>
                    </a-form-item>
                </a-col>
                <a-col :span='8'>
                    <a-button type="primary" :span='2' style='margin:0 20px 0 20px;' class='ant-btn-primary' @click="lineGetSelectLines">搜索</a-button>
                    <a-button :span='2' @click="reset">重置</a-button>
                </a-col>
              </a-row>
          </a-form>
      </div>
      <!-- 城市线路 -->
      <div class="road-city-changeway info-1200">
        <div class="r-hot-title">
              <span></span>
              <span class="r-city">{{departureCar}}</span>
              <span></span>
              <span class="r-city">{{destinationCar}}</span>
        </div>
       <!-- 运输方式切换 -->
        <a-tabs defaultActiveKey="" @change="lineTypeChange">
            <a-tab-pane tab="全部" key="">
            </a-tab-pane>
            <a-tab-pane tab="公路" key="1">
            </a-tab-pane>
            <a-tab-pane tab="铁路" key="2">
            </a-tab-pane>
            <a-tab-pane tab="航空" key="3">
            </a-tab-pane>
            <a-tab-pane tab="海路" key="4">
            </a-tab-pane>
            <!-- <a-tab-pane tab="多式联运" key="5">
              <div class="intermodal">
                      <a-list itemLayout="vertical" size="large" :dataSource="ALListData">
                          <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                              <div class="road-box-conent">
                                  <div class="road-pic">
                                      <img v-lazy="item.imgurl">
                                  </div>
                                  <div class="road-name">
                                      <span>出发地:<i class="road-city-name">{{item.startPlace}}</i></span>
                                      <span>到达地:<i  class="road-city-name">{{item.arrivePlace}}</i></span>
                                      <span>企业名称:<i  class="road-city-name">{{item.companyName}}</i></span>
                                      <span>介绍:<i class="road-black">{{item.details}}</i></span>
                                      <span>地址:<i class="road-black">{{item.address}}</i></span>
                                  </div>
                              </div>
                              <div class="road-box-conent">
                                    <p><i class="road-city-name">空海联运</i></p>
                                    <span>时效:<i class="road-black">{{item.times}}</i></span>
                              </div>
                              <div class="road-box-conent">
                                    <p><i class="road-city-name">{{item.useCompany}}</i></p>
                                    <div class="useStar">
                                        <span>用户星级</span>
                                        <a-rate :defaultValue="2.5" allowHalf />
                                        <div class="attestaion">{{item.renzhen}}</div>
                                    </div>
                              </div>
                              <div class="road-box-conent">
                                    <a-button v-if="loggedIn" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal">我要发货</a-button>
                                    <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">我要发货</a-button></router-link>
                                    <nuxt-link :to="'/transport/'+item.lineId">
                                      <a-button class='road-detail'>查看详情</a-button>
                                    </nuxt-link>
                              </div>
                          </a-list-item>
                      </a-list>
              </div>
            </a-tab-pane> -->
        </a-tabs>
        <div class="all-ways">
          <a-list itemLayout="vertical" size="large" :dataSource="ALListData">
                <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                  <div class="road-box-conent">
                        <div class="road-pic">
                            <!-- <img :src=""> -->
                        </div>
                        <div class="road-name">
                            <span>出发地:<i class="road-city-name">{{item.fromCity}}</i></span>
                            <span>到达地:<i  class="road-city-name">{{item.toCity}}</i></span>
                            <span>企业名称:<i  class="road-city-name">{{item.companyName}}</i></span>
                            <span>介绍:<i class="road-black"></i></span>
                            <span>地址:<i class="road-black"></i></span>
                        </div>
                  </div>
                  <div v-if="item.lineType==1" class="road-box-conent public-road">
                          <p><i class="road-city-name">公路运输</i></p>
                          <span>重货:<i class="road-orange">{{item.weightPriceDisplay}}</i>/{{item.weightPriceUnit}}</span>
                          <span>轻货:<i class="road-orange">{{item.volumePriceDisplay}}</i>/{{item.volumePriceUnit}}</span>
                          <span v-if="item.validDay">时效:<i class="road-black">{{item.validDay}}天</i></span>
                          <span v-if="!item.validDay">时效:<i class="road-black">长期有效</i></span>
                          <span>最低一票价:<i class="road-orange">{{item.lowprice}}</i></span>
                  </div>
                  <div v-if="item.lineType==2" class="road-box-conent public-road">
                      <div>
                            <p><i class="road-city-name">铁路运输</i></p>
                            <span>重货:<i class="road-orange">{{item.weightPriceDisplay}}</i>/{{item.weightPriceUnit}}</span>
                            <span>轻货:<i class="road-orange">{{item.volumePriceDisplay}}</i>/{{item.volumePriceUnit}}</span>
							<span v-if="item.validDay">时效:<i class="road-black">{{item.validDay}}天</i></span>
							<span v-if="!item.validDay">时效:<i class="road-black">长期有效</i></span>
                      </div>
                  </div>
                  <div v-if="item.lineType==3" class="road-box-conent air-title">
                      <div>
                            <p><i class="road-city-name">航空运输</i></p>
                            <span class="seaC">航空公司:
                                <i class="road-black">{{item.airCompany}}</i>
                            </span>
                            <table>
                                <thead>
                                      <th>Min</th>
                                      <th>+45</th>
                                      <th>+100</th>
                                      <th>+300</th>
                                      <th>+500</th>
                                      <th>+1000</th>
                                </thead>
                                <tbody>
                                  <tr>
                                      <td class="road-orange">{{item.addone}}</td>
                                      <td class="road-orange">{{item.addtwo}}</td>
                                      <td class="road-orange">{{item.addtree}}</td>
                                      <td class="road-orange">{{item.addfour}}</td>
                                      <td class="road-orange">{{item.addfive}}</td>
                                  </tr>
                                 </tbody>
                            </table> 
                            <span class="seaTime">时效:<i class="road-black">{{item.validDay}}天</i></span>
                            <span class="seaTime">时效:<i class="road-black">{{item.validDay}}天</i></span>
                      </div>
                  </div>
                  <div v-if="item.lineType==4" class="road-box-conent sea-road">
                      <div>
                            <p><i class="road-city-name">海运</i></p>
                            <span class="seaC">海运公司:
                              <i class="road-black">{{item.seaCompany}}</i>
                            </span>
                            <table>
                                  <thead>
                                      <th>20’</th>
                                      <th>40’</th>
                                      <th>40HQ</th>
                                      <th>+300</th>
                                      <th>45’</th>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td class="road-orange">111</td>
                                          <!-- <td class="road-orange">{{item.addone}}</td>
                                          <td class="road-orange">{{item.addtwo}}</td>
                                          <td class="road-orange">{{item.addtree}}</td> -->
                                      </tr>
                                  </tbody>
                            </table>
                            <span class="seaTime" v-if="item.validDay">时效:<i class="road-black">{{item.validDay}}天</i></span>
                            <span class="seaTime" v-if="!item.validDay">时效:<i class="road-black">长期有效</i></span>
                      </div>
                  </div>
                  <div class="road-box-conent">
                          <p><i class="road-city-name">{{item.company}}</i><b v-if="item.status == 1">推荐</b></p>
                          <div class="useStar">
                              <span>用户星级</span> 
                              <a-rate :defaultValue="2.5" disabled allowHalf />
                              <div class="attestaion">已认证</div>
                          </div>
                  </div>
                  <div class="road-box-conent">
                      <a-button v-if="loggedIn&&loggedUser.attestationStatus==111" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal">立即沟通</a-button>
                      <a-button v-if="loggedIn&&loggedUser.attestationStatus!=111" class='ant-btn-primary road-sell' type="primary" @click="TipsShowModal">立即沟通</a-button>
                      <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">立即沟通</a-button></router-link>
                      <nuxt-link :to="'/transport/'+item.lineId">
                          <a-button class='road-detail'>查看详情</a-button>
                      </nuxt-link>
                  </div>
                </a-list-item>
          </a-list>
        </div> 
      </div>
      <!-- 弹框 -->
      <Elastic  ref='elastic'></Elastic>
      <!-- 提示认证弹框 -->
    <Elastics  ref='elastics'></Elastics>
       <!--地图Svg显示位置-->
      <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
  </div>
</template>
<script>
import Elastic from './../../../../components/dialog/Elastic'
import MapSvg from '@/components/dialog/MapSvg'
export default{
    components: {
      Elastic,
      MapSvg,
      Elastics
    },
    data(){
        return{
          lineType: '',
          loggedIn:'',
          // 起运地地址
          departureCar: '',
          destinationCar: '',
          companyName: '',
          ALListData: [],
          detail: '',
          pagination: {
            onChange: (page) => {
              console.log(page);
            },
            pageSize: 6,
          },
        }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },
    created(){
      this.departureCar = this.$route.query.fromCity || '';
      this.destinationCar = this.$route.query.toCity || '';
      this.companyName = this.$route.query.companyName || '';
      this.lineGetSelectLines();
    },
    methods:{
      // 未认证弹窗
      TipsShowModal(id){
        this.$refs.elastics.warning(id);
      },
      // 线路切换
      lineTypeChange (key) {
        this.lineType = key;
        this.lineGetSelectLines();
      },
      // 弹框
      elasticShowModal(){
        this.$refs.elastic.showModal();
      },
      // 重置
      reset () {
        this.departureCar = '';
        this.destinationCar = '';
        this.companyName = '';
      },
      // 获取线路详情信息
      async lineById (id) {
          const res = await this.$store.dispatch('info/lineById',id)
          if (res.status && res.data.length) {
            this.detail = res.data[0];
            console.log('detail::',detail);
          } 
      },
      // 获取线路列表
      async lineGetSelectLines () {
          const res = await this.$store.dispatch('info/lineGetSelectLines',{
            lineType: this.lineType,
            fromCity: this.departureCar,
            companyName: this.companyName,
            toCity: this.destinationCar,
            // transType: this.transType,
            pageSize: 7,
            pageIndex: 1,
          })
          if (res.status) {
            this.ALListData = res.data;
            // console.log("allDetail::",ALListData);
          } 
      },
      // 地图
      mapSvgCall (d) {
        this[d.name] = d.city;
      },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      // 调用距离返回
      distanceCall (num) {
      }
  }
}
</script>
<style lang="scss">
  @import "./../../../../assets/css/info/roadDetail.scss";
.road-detail-content{
  //公共样式
    .all-ways {
     .road-box-conent:nth-child(2){
          margin-top:4px;
          text-align:center;
         .road-orange{
               color:#FFA200;
         }
         p{
          line-height:16px;
          margin-bottom:12px;
         }
         span{
           margin-bottom:12px;
           text-indent:1em;
         }
        span:nth-child(5){
          text-indent:-52px;
        }
        .seaTime{
            margin-top:16px;
        }
      }
    .road-box-conent:nth-child(3){
          margin-left:68px;
         .road-city-name{
          vertical-align:middle;
        }
    }
  }
  //公路,铁路
  .public-road{
      width:245px;
      text-align:center;
      margin-left:68px;
  }
  //航空
  .air-title{
      width:300px;
      margin-left:25px;
      th{
        padding-right:20px;
      }
      td{
          padding-right:20px;
          padding-top:2px;
      }
  }
  //海路
  .sea-road{
      width:300px;
      margin-left:20px;
      th{
          width:50px;
          text-align:center;
          float: left;
          margin-left:10px;
      }
      th:first-child{
          margin-left:0;
      }
      tr{
          td{
              width:50px;
              text-align:center;
              float: left;
              margin-left:10px;
          }
          td:first-child{
              margin-left:0;
          }
      }
  }
}




</style>